<template>
  <div>
    <x-header :left-options="{backText: ''}" :title="$route.name"><router-link to="/" slot="right"> <a class="fa fa-home fa-15x"></a> </router-link></x-header>
    <scroller ref="myscroll" :on-refresh="refresh" :on-infinite="infinite" :no-data-text="noDataText" class="scroll-view">
      <ul>
        <li v-for="(item, index) in noticeList" :key="index" > <!-- class="active" -->
          <div @click="ExpandCollapseClick(item, index)">
            <div class="top-box">
              <h2>{{item.title}}<badge v-if="item.status == '1'"></badge></h2>
              <div class="top-news-text">
                <p><span>{{item.createTime}}</span></p>
              </div>
            </div>
            <div class="bottom-box" v-if="item.show">
              <span v-html="item.content"></span>
            </div>
          </div>
        </li>
      </ul>
      <gz-default-page v-if="nomessage" :imageType="'message'" :textSize="'1.3em'" :text="'暂无消息'"></gz-default-page>
    </scroller>
    <div class="Batch-reading-box" v-if="!nomessage"><div class="Batch-reading" @click="allreadClick">批量阅读</div></div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swiper, SwiperItem } from "vux";
import {
  gzDefaultPage
  } from '@/components/customize'
import VueScroller from "vue-scroller";
Vue.use(VueScroller);
export default {
  name: "messageList",
  components: {
    Swiper,
    SwiperItem,
    gzDefaultPage
  },
  data() {
    return {
      offset: 0,
      limit: 10,
      type:'1',
      total: 0,
      noticeList: [],
      isLoading: true,
      wu:false,
      defalutimage: '',
      noDataText:'',
      nomessage: false,
    };
  },
  mounted() {
    this.$refs.myscroll.finishInfinite(true);
    this.$vux.loading.show({
      text: '加载中...'
    })
    this.getData();
  },
  methods: {
    refresh(done) {
      //下拉刷新
      this.offset = 0;
      this.noticeList = [];
      this.getData(done);
    },
    infinite(done) {
      //上拉加载
      if (this.isLoading) {
        this.offset = Number(this.offset)+Number(this.limit);
        this.getData(done);
      }
    },
    getData(done) {
      this.noDataText = ""
      let defer = this.baseService.postForm( this.__ctx + "/oa/oAInstationMsg/list", {offset:this.offset,limit:this.limit});
      defer.then(res => {
        this.isLoading = true;
        this.$refs.myscroll.finishPullToRefresh();
        this.$vux.loading.hide()
        let { isOk, rows, total, page } = res;
        if (isOk) {
          this.total = total;
          if(this.offset == 0 && rows.length == 0){
            this.nomessage = true;
          }else{
            this.nomessage = false;
          }
          if (page > 1) {
            this.noticeList = [...this.noticeList, ...rows];
          } else {
            this.noticeList = rows;
          }
          if (this.noticeList.length == total) {
            this.$refs.myscroll.finishInfinite(true);
          }else{
            if(typeof done == 'function'){
              done()
            }
          }
          this.noDataText = "暂无更多消息"
        } else {
          if(this.offet == 0){
            this.nomessage = true;
          }
          this.$refs.myscroll.finishInfinite(true);
          this.$vux.toast.show({
            type: "warn",
            text: data.msg
          });
        }
      })
      .catch(err => {
        this.$refs.myscroll.finishInfinite(true);
      });
    },
    ExpandCollapseClick(item, index){
      if(item.status == '1'){
        let defer = this.baseService.postForm(
          this.__ctx + "/oa/oAInstationMsg/read", {id: item.id}
        );
        defer.then(res => {
          this.isLoading = true;
          this.$refs.myscroll.finishPullToRefresh();
          let { isOk, data } = res;
          if (isOk) {
            this.noticeList[index].status = '2';
          } else {

          }
        })
      }
      this.showCloseFn(item, index);
    },
    // 查看消息展开
    showCloseFn(item, index){
      if(this.noticeList[index].show){
        this.noticeList[index].show = false;
        this.$set(this.noticeList, index, this.noticeList[index]);
      }else{
        let noticeList = this.noticeList
        noticeList.forEach((data,i) => {
          if(data.id == item.id){
            noticeList[i].show = true;
          }else{
            noticeList[i].show = false;
          }
        })
        this.noticeList = noticeList;
      }
      this.$forceUpdate()
    },
    // 批量已读
    allreadClick(){
      let param = [];
      let noticeList = this.noticeList
      noticeList.forEach((i) => {
        if(i.status == '1'){
          param.push(i.id)
        }
      })
      if(param.length > 0){
        this.$vux.loading.show({
          text: '加载中...'
        })
        let defer = this.baseService.post( this.__ctx + "/oa/oAInstationMsg/updateStatus", param);
        defer.then(res => {
          this.$vux.loading.hide()
          let { isOk, data } = res;
          if (isOk) {
            this.$vux.toast.show({
              type: "success",
              text: '批量阅读消息成功！'
            });
            this.offset = 0;
            this.noticeList = [];
            this.getData();
          } else {
            this.$vux.toast.show({
            type: "warn",
            text: data.msg
          });
          }
        })
      }else{
        this.$vux.toast.text('当前展示消息中暂无可读消息！');
      }
    }
  }
};
</script>

<style scoped lang="less">
.vux-header{
  background-color: transparent;
  /deep/.vux-header-left .left-arrow::before{
    border: 2px solid #1D2129!important;
    border-width: 2px 0 0 2px!important;
  }
  /deep/.vux-header-title{
    color: #1D2129!important;
  }
  .vux-header-right a{
    color: #1D2129;
  }
}
.scroll-view {
  top: 46px;
  background: #F4F4F4;
  padding-bottom: 3em;
  ul {
    padding: 13px 12px 2em 12px;
    li {
      background-color: #fff;
      border-radius: 5px;
      margin-bottom: 12px;
      padding: 1em 1.3em 0.5em;
      .top-box {
        padding-left: 5px;
        h2 {
          font-size: 1.7em;
          line-height: 1.7em;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          // white-space: nowrap;
          margin-bottom: 5px;
          color: #1D2129;

          .vux-badge{
            margin-left: 0.5em;
          }
        }
        .top-news-text {
          font-size: 1.2em;
          p {
            margin-bottom: 5px;
            span {
              color: #86909C;
            }
          }
        }
      }
      .bottom-box {
        min-height: 4em;
        font-size: 1.17em;
        color: #4E5969;
        border-top: 1px dashed #C9CDD4;
        padding: 5px 0 5px 5px;
        .bottom-spot {
          margin: 0 5px;
        }
      }

      &.active{
        .top-box {
          h2 {
            color: #C9CDD4;
          }
          .top-news-text {
            p {
              span {
                color: #C9CDD4;
              }
            }
          }
        }
        .bottom-box {
          color: #C9CDD4;
          border-top: 1px dashed #C9CDD4;
        }
      }
    }
  }
}
.Batch-reading-box{
  width: 100.5%;
  padding: 0;
  position: fixed;
  bottom: -1px;
  left: 0;
  background: #F4F4F4;
  .Batch-reading{
    width: 94%;
    padding: 0.5em 0;
    margin: 11px auto;
    text-align: center;
    background: #FF4A32;
    border-radius: 4px 4px 4px 4px;
    font-size: 1.33em;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
  }
}
</style>
